<script setup>
import { ref } from 'vue';
import { ElButton } from 'element-plus';
import CommonGroupByDept from '@/common/CommonGroupByDept.vue';
import CommonOrganization from '@/common/CommonOrganization.vue';

const orgboxShow = ref(false);
const deptDialogShow = ref(false);
const handlers = ref(null);
const userInfoArr = ref([]);

const closeChangeBoxShowDialog = (show) => {
  orgboxShow.value = show;
};

const closeDeptDialog = () => {
  deptDialogShow.value = false;
};

const handleUserInfo = (item) => {
  if (!item.length) {
    handlers.value = null;
  } else {
    handlers.value = item;
  }

  orgboxShow.value = false;
};

// 获取指定人员数据
const handleDeptInfo = (arr) => {
  userInfoArr.value = arr;

  if (arr.length) {
    handlers.value = arr.map((item) => {
      return item.id;
    });
  } else {
    handlers.value = [];
  }

  deptDialogShow.value = false;
};
</script>
<template>
  <div class="group_root">
    <h2>系统提供了两种人员组织架构的界面,根据设计要求自行选择,不用的代码模块便可剔除</h2>
    <div class="btn">
      <ElButton
        type="primary"
        round
        @click="
          () => {
            deptDialogShow = true;
          }
        "
        >常规的组织架构</ElButton
      >
      <ElButton
        type="primary"
        round
        @click="
          () => {
            orgboxShow = true;
          }
        "
        >带穿梭框的组织架构</ElButton
      >
    </div>

    <!-- 常规的组织架构 -->
    <CommonGroupByDept
      :dept-dialog-show="deptDialogShow"
      :user-info-arr="userInfoArr"
      @handle-dept-info="handleDeptInfo"
      @close-dept-dialog="closeDeptDialog"
    />

    <!--  带穿梭框的组织架构-->
    <CommonOrganization
      :orgbox-show="orgboxShow"
      @close-change-box-show-dialog="closeChangeBoxShowDialog"
      @handle-user-info="handleUserInfo"
    />
  </div>
</template>

<style scoped lang="scss">
.group_root {
  .btn {
    margin-top: 20px;
    margin-right: 12px;
  }
}
</style>
